<script setup>
import {fileSlice, getFileMD5, imgFileTypeSimple, judgeInFileTypes} from '@/utils/file_utils.js'

/*
 * 上传图片文件处理
 */
function fileHandler(file) {
  console.log(file)
  // 判断选择上传的图片类型是否为指定的格式类型
  judgeInFileTypes(file, imgFileTypeSimple).then(
      // 返回的 promise 状态为成功
      () => {
        // 当前选择的图片文件为指定格式的图片文件
        // 计算图片文件的 MD5
        return getFileMD5(file)
      },
      // 返回的 promise 状态为失败，进行错误提示
      () => {
        ElMessage({
          type: 'error',
          message: '请选择指定格式的图片进行上传'
        })
      }
  ).then(
      // 获取图片文件的 MD5 成功
      md5 => {
        // TODO 文件相关信息上传至服务端
        // MD5、用户id、文件类型、文件后缀、文件名、文件大小
        // 判断文件是否存在
        // 进行文件分片
        return fileSlice(file, 1024 * 100)
      }
  ).catch(
      () => {
        ElMessage({
          type: 'error',
          message: '图片上传失败，请重新尝试'
        })
      }
  )
}
</script>

<template>
  <!-- 用户中心实名认证页面 -->
  <div class="user-real-name-page">
    <div>
      <!-- 用户中心实名认证页面操作区域 -->
      <div class="user-real-name-operate">
        <!-- 标题 -->
        <div class="title">
          <p>实名认证</p>
        </div>
        <!-- 上传身份证 -->
        <div class="upload-id-card">
          <!-- 上传身份证标题 -->
          <div class="upload-id-card-title">
            <p>上传身份证照</p>
          </div>
          <!-- 上传身份证照 -->
          <div class="upload-id-card-photo">
            <!-- 上传身份证人像面 -->
            <TailIDCardUpload
                class="upload-id-card-photo-people"
                :skeleton-img-url="'var(--tail-id-card-upload-back-skeleton-img-url)'"
                :title="'请上传人像面图片'"
                :file-handler="fileHandler"
            ></TailIDCardUpload>
            <!-- 上传身份证国徽面 -->
            <TailIDCardUpload
                :skeleton-img-url="'var(--tail-id-card-upload-front-skeleton-img-url)'"
                :file-handler="fileHandler"
            ></TailIDCardUpload>
          </div>
        </div>
        <!-- 输入真实姓名 -->
        <div class="real-name-ipt">
          <div>
            <p>真实姓名</p>
          </div>
          <div>
            <TailInput
                :placeholder="'请输入真实姓名'"
            ></TailInput>
          </div>
        </div>
        <!-- 输入身份证号码 -->
        <div class="id-card-num-ipt">
          <div>
            <p>身份证号</p>
          </div>
          <div>
            <TailInput
                :placeholder="'请输入身份证号'"
            ></TailInput>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/*
 * 用户中心实名认证页面
 */
.user-real-name-page {
  width: 100%;
  overflow: auto;

  /*
   * 父元素与子元素之间多一层 div 以实现 flex 居中和
   * 溢出出现滚动条完整显示子元素
   */
  & > div {
    width: 100%;
    height: 100%;
    min-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /*
   * 用户中心实名认证页面操作区域
   */
  .user-real-name-operate {
    box-sizing: border-box;
    min-width: max-content;
    padding: 2rem;
    margin: 1rem;
    border-radius: 1rem;
    background-color: #efefef66;

    /*
     * 各部分标题文字
     */
    div > div > p {
      margin: 1rem 0;
      font-weight: bold;
    }

    /*
     * 标题
     */
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      font-weight: bold;
      font-family: RJTHFH, serif;
      font-size: 1.5rem;
    }

    /*
     * 上传身份证
     */
    .upload-id-card {

      /*
       * 上传身份证照
       */
      .upload-id-card-photo {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;

        /*
         * 上传身份证人像面
         */
        .upload-id-card-photo-people {
          margin-right: 1rem;
        }
      }
    }

    /*
     * 输入真实姓名
     */
    .real-name-ipt {

    }

    /*
     * 输入身份证号码
     */
    .id-card-num-ipt {

    }
  }
}
</style>